<template>
    <!-- 学习中页面 -->
    <div class="wstudyingBox">
        <x-header :left-options="{showBack: true,backText:'已学习'}" class="headerBox"></x-header>
        <!-- 学习中 -->
        <div class="courseBox mb_20" v-for="(item,index) in curriculum" :key="index">
            <div class="leftCont"  @click="hreftwo(item.id)">
                <img v-if="item.largePicture!=''" :src="item.largePicture" class="courseImg"/>
                <img v-else class="courseImg" src="../assets/images/courseSet.png"/>
            </div>
            <div class="rightCont"  @click="hreftwo(item.id)">
                <div class="rightContTitle">{{item.title}}</div>
                <div class="curriculumTeacher ">讲师：{{item.userName}}</div>
                <div class="flex_sb ">
                    <div class="classHour">
                        课时
                        <span>{{item.lessonNum}}节</span>
                    </div>
                    <div>
                        <span class="process" v-if="item.process < 100">{{item.process}}%</span>
                        <img src="../assets/images/tick.png" v-else="item.process == 100" class="tick"/>
                    </div>
                </div>
                <x-progress :percent="parseInt(item.process)" :show-cancel="false" class="progressBox"></x-progress>
                <!-- <progress percent="{{item.process}}" activeColor='#1F7AFF' border-radius="5" stroke-width="4" active /> -->
            </div>
        </div>
    </div>
</template>

<script>
    import {XHeader, XProgress} from "vux";
    import {getCourseStatus} from '@/api/index/study';
    import store from "../store/store";

    export default {
        components: {
            XHeader,
            XProgress
        },
        data() {
            return {
                curriculum: [
                    {
                        courseImg: require('../assets/images/course01.png'),
                        courseName: '爱语文，做有修养的人',
                        teacher: '林越峰',
                        classHour: '36',
                        process: '40',
                        tick: require('../assets/images/tick.png')
                    },
                    {
                        courseImg: require('../assets/images/course02.png'),
                        courseName: '爱语文，做有修养的人',
                        teacher: '林越峰',
                        classHour: '26',
                        process: '100',
                        tick: require('../assets/images/tick.png')
                    },
                    {
                        courseImg: require('../assets/images/course01.png'),
                        courseName: '爱语文，做有修养的人',
                        teacher: '林越峰',
                        classHour: '36',
                        process: '40',
                        tick: require('../assets/images/tick.png')
                    },
                    {
                        courseImg: require('../assets/images/course02.png'),
                        courseName: '爱语文，做有修养的人',
                        teacher: '林越峰',
                        classHour: '26',
                        process: '80',
                        tick: require('../assets/images/tick.png')
                    }
                ],
            }
        },
        mounted() {
            getCourseStatus(this.$store.state.user.id).then(res => {
                console.log(res.data.data);
                this.curriculum = res.data.data.learnedCourses;
            }).catch(err => {
                console.log(err)
            });


        },
        methods: {
            hreftwo(id) {
                console.log(id);
                this.$router.push({name: 'courseDetails-buy', query: {id: id}})
            },
        }

    }
</script>

<style lang="less" scoped>
    .wstudyingBox {
        padding-bottom: 120px;

        // 头部导航
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }
        }

        /* 内容 */

        .courseBox {
            display: flex;
            background: #fff;
            padding: 20px 30px;

            .leftCont {
                width: 294px;
                height: 186px;
                margin-right: 20px;
                flex-shrink: 0;

                .courseImg {
                    width: 100%;
                    height: 100%;
                }
            }

            .rightCont {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding-bottom: 5px;
                overflow: hidden;
                flex-grow: 1;

                .rightContTitle {
                    font-size: 36px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                .curriculumTeacher {
                    font-size: 24px;
                    line-height: 2;
                    color: #f88c0f;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                .classHour {
                    font-size: 24px;
                }

                .classHour text {
                    color: #aaa;
                    margin-left: 10px;
                }

                .process {
                    color: #aaa;
                    font-size: 24px;
                }

                .tick {
                    width: 22px;
                    height: 22px;
                }

                /deep/ .progressBox {
                    border-radius: 20px;

                    .weui-progress__bar {
                        height: 10px;

                        .weui-progress__inner-bar {
                            background-color: #1f77fa;
                        }
                    }
                }
            }
        }
    }
</style>